import React, { Component } from "react";
import Glide from "@glidejs/glide";
import anime from "animejs/lib/anime.es.js";

import catBanner from "../../assets/images/cat-banner.jpg";
import yangtuoBanner from "../../assets/images/yangtuo-banner.jpg";
import dogBanner from "../../assets/images/dog3.jpg";

import "../../assets/libs/glide/glide.core.min.css";
import "../../assets/libs/glide/glide.theme.min.css";
import "../../assets/css/index/index.css";

class Slide extends Component {
  glideMount() {
    const glide = new Glide(".glide");
    const captionsEl = document.querySelectorAll(".slide-caption");

    glide.on(["mount.after", "run.after"], () => {
      const caption = captionsEl[glide.index];
      anime({
        targets: caption.children,
        opacity: [0, 1],
        duration: 400,
        easing: "linear",
        delay: anime.stagger(400, { start: 300 }),
        translateY: [anime.stagger([40, 10]), 0],
      });
    });

    glide.on("run.before", () => {
      document.querySelectorAll(".slide-caption > *").forEach((el) => {
        el.getElementsByClassName.opacity = 0;
      });
    });

    glide.mount();
  }
  componentDidMount() {
    this.glideMount();
  }
  render() {
    return (
      <div id="home" className="glide">
        <div className="glide__track" data-glide-el="track">
          <div className="glide__slides">
            <div className="glide__slide">
              <div className="slide-caption">
                <h1>猪猪爱心宠物店</h1>
                <h3>
                  在猪猪爱心宠物店，领养心爱的宠物，体验不同的乐趣，现已新增羊驼。
                </h3>
                <button className="explore-btn">探索更多</button>
              </div>
              <div className="backdrop"></div>
              <img src={catBanner} alt="cat" />
            </div>
            <div className="glide__slide">
              <div className="slide-caption left">
                <h1>可爱的羊驼，爱了又爱</h1>
                <h3>
                  在羊驼世界，感受高贵的气息，虽然它很可爱，但请小心羊驼的口水。
                </h3>
                <button className="explore-btn">探索更多</button>
              </div>
              <div className="backdrop"></div>
              <img src={yangtuoBanner} alt="yangtuo"></img>
            </div>
            <div className="glide__slide">
              <div className="slide-caption left">
                <h1>中二的哈士奇，拆家小能手</h1>
                <h3>迎面而来的中二气息，养了它你就要做好被拆家的准备了</h3>
                <button className="explore-btn">探索更多</button>
              </div>
              <div className="backdrop"></div>
              <img src={dogBanner} alt="dog"></img>
            </div>
          </div>
        </div>
        <div className="glide__arrows" data-glide-el="controls">
          <button
            className="glide__arrow glide__arrow--left"
            data-glide-dir="<"
          >
            《
          </button>
          <button
            className="glide__arrow glide__arrow--right"
            data-glide-dir=">"
          >
            》
          </button>
        </div>
        <div className="glide__bullets" data-glide-el="controls[nav]">
          <button className="glide__bullet" data-glide-dir="=0"></button>
          <button className="glide__bullet" data-glide-dir="=1"></button>
          <button className="glide__bullet" data-glide-dir="=2"></button>
        </div>
      </div>
    );
  }
}

export default Slide;
